SView for HTML5 V6.1集成说明书

SView for HTML5 控件提供三维模型基本的浏览、基本三维对象操作、动画播放、颜色设置等功能的实现接口，可实现基本的三维模型展示功能，以便于用户个性化定制属于自己的产品。

集成之前需要熟悉javascript、HTML语言及常用网页代码编辑软件，以便快速准确的集成相关功能界面。详细集成准备如下所示:

集成环境

SView for HTML5 开发库集成需要的环境：

开发环境：常用前端代码编辑器
系统环境: macOS、Linux、windows
运行环境: IE、edge、chorme、firefox等支持html5的浏览器

请按照下面步骤进行集成

具体步骤

首先将demo中./img/html5、js、css、zfile文件夹放入项目文件指定位置处。

在项目网页中引入css、js文件

<link href="css/bootstrap.css" rel="stylesheet" media="screen" >
<link href="css/common.css" rel="stylesheet">
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
<link href="css/colpick.css" rel="stylesheet" type="text/css">
<link href="css/progressbar.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="js/Detector.js"></script>
<script src="js/m3d.min.js"></script>
<script src="js/sview.1.0.7.7.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap-contextmenu.js"></script>//右键菜单
<script src="js/zTree/jquery.ztree.core-3.5.js"></script>
<script src="js/zTree/jquery.ztree.excheck-3.5.js"></script>
<script src="js/zTree/jquery.ztree.exedit-3.5.js"></script>
<script src="js/jszip/jszip.min.js"></script>
<script src="js/jszip/jszip-utils.min.js"></script>
<script src="js/nipplejs.min.js"></script>
<script src="js/colpick.js"></script>

在脚本中执行sview默认对象的初始化，如下代码所示

if (!Detector.webgl) {
	Detector.addGetWebGLMessage();
}
var sview0 = null;
$(function() {
    sview0 = initSView("sview0");
    try {
        //打开一个jsvl或者obj文件
        //参数1使用转换后的jsvl和bin文件的压缩包网址。
        //参数2说明是否为zip包
        //参数3为压缩包内的文件名称，可能与压缩包名不一致
        //参数4是文件格式 如果为zsvl则为“jsvl”， 如果为obj压缩包，则为“obj”
        //中文时需增加服务端utf-8路径配置。
        //var ret = sview0.OpenRemote("models/24-09-01.u3d.zsvl", true, "", "jsvl");//单个文件

        //打开一个svlx文件
        //参数1svlx文件的网址。
        //参数2说明是否为zip包
        //中文时需增加服务端utf-8路径配置。
        var ret = sview0.OpenRemote("models/flight engine.svlx", true);


        //同时打开多个远程svlx文件
        //参数1svlx文件的网址数组
        //参数2装配组合成的顶级装配的名称
        //参数3是文件格式
        //中文时需增加服务端utf-8路径配置。
        //var urls = ["models/elbow.asm.svlx", 
        //            "models/jiheti.obj.svlx" ,
        //            ];           
	//var ret = sview0.OpenRemotes(urls,"topAssembly"/*指定顶级的名称*/);

	//同时打开多个远程文件
	//参数1使用转换后的jsvl和bin文件的压缩包网址数组
	//参数2装配组合成的顶级装配的名称
	//参数3是文件格式
	//中文时需增加服务端utf-8路径配置。
	//var urls = ["zfile/svls/24-09-01.fbx.zsvl",
	//            "zfile/svls/24-09-02.fbx.zsvl",
	//            "zfile/svls/24-09-03.fbx.zsvl",
	//            "zfile/svls/24-10-01.fbx.zsvl",
	//            "zfile/svls/24-10-02.fbx.zsvl",
	//            "zfile/svls/24-10-03.fbx.zsvl"
	//            ];           
	//var ret = sview0.OpenRemotes(urls,"topAssembly"/*指定顶级的名称*/, "jsvl");

	if(!(ret==""||ret==undefined))
	{
		alert(ret);
	}
	} catch (e) {
		alert("无法正常打开，请检查原始模型是否正确或联系客服人员！");
		$("#jdzw").css("width", "100%");
		$("#jdz").html("无法正常打开，请检查原始模型是否正确或联系客服人员！");
	}
});

根据api文档中接口所示，用js或jquery进行所需功能的调用即可。具体可参考sview.***.js文件中示例。

找到mongoose-free-6.5.exe，运行此软件，开启web测试服务。

进入demo.html 页面